<template>

  <div>


    <Row>
      <div class="panel">
        <Row>
          <i-col span="4" :xs="{span: 12}" :sm="{span: 4}" class="title"><Icon type="ios-information-circle" />
            用户数据导入</i-col>
          <i-col span="20"></i-col>
        </Row>
        <Row class="panel_content">
<!--          <i-col  offset="1" span="6">-->
<!--            <div class="tag_item" style="background:#00c853" @click="showUploadModal(3)">-->
<!--              <Icon type="md-cloud-upload" /> <span>本地CSV文件</span>-->
<!--            </div>-->
<!--          </i-col>-->
<!--          <i-col  offset="1" span="6">-->
<!--            <div class="tag_item" style="background:#00c853" @click="showUploadModal(4)">-->
<!--              <Icon type="md-cloud-upload" /> <span>独立站Excel文件</span>-->
<!--            </div>-->
<!--          </i-col>-->
          <i-col offset="1" span="6">
            <div class="tag_item"  @click="showRecord('importRecords','left')">
              <Icon type="md-document" /> <span>查看导入记录</span>
            </div>
          </i-col>
        </Row>
      </div>
    </Row>
    <Row>
      <div class="panel">
<!--        <Row class="panel_content">-->
<!--          <i-col  offset="1" span="6">-->
<!--            <div class="tag_item"  @click="showRecord('getInfoRecords','right')">-->
<!--              <Icon type="md-document" /> <span>查看解析记录</span>-->
<!--            </div>-->
<!--          </i-col>-->
<!--        </Row>-->
      </div>
    </Row>

    <!--导入excel表格-->
    <Modal v-model="status.modalImport.isShow" title="用户数据导入"
           closable mask-closable :loading="status.modalImport.isLoading"
           :styles="{top: '20px',bottom:'20px',width:'40%',}">
      <div slot="footer">
        <Button type="primary" style="" @click="uploadAccount" >上传
        </Button>
      </div>
      <Form :model="uploadParam" :label-width="100" class="modal_newuser_form" :rules="rules" ref="importForm">
        <Alert type="warning" v-if="status.modalImport.source == 1 || status.modalImport.source == 3">请确认导入的csv文件格式：第2个字段是ins用户名；第5个字段为用户id！</Alert>
        <Alert type="warning" v-if="status.modalImport.source == 1 || status.modalImport.source == 3">在选择用户文件前设置抓取类型和输入关键字，否则无法保存关键字信息！</Alert>
        <Alert type="warning" v-if="status.modalImport.source == 4">请确认导入的独立站数据是增量数据，否则会产生重复记录！</Alert>
        <FormItem label="来源或类型:" prop="keywordType" v-if="status.modalImport.source != 4" >
          <Select  v-model.trim ="uploadParam.keywordType" >
            <Option value = "1">粉丝</Option>
            <Option value = "2">关注</Option>
            <Option value = "3">帖子</Option>
          </Select >
        </FormItem>
        <FormItem label="关键字:" prop="keyword" v-if="status.modalImport.source != 4" >
          <Input  v-model.trim="uploadParam.keyword" placeholder="请输入"  class="modal_form_input"></Input>
        </FormItem>
        <FormItem label="谷歌抓取网站" prop="isGoogleCatch" v-if="status.modalImport.source == 4" >
          <i-switch v-model="uploadParam.isGoogleCatch" ></i-switch>
        </FormItem>
        <FormItem label="员工账户" prop="employeeName" v-if="status.modalImport.source == 4 && uploadParam.isGoogleCatch == false" >
          <Input v-model.trim="uploadParam.employeeName" placeholder="请输入推广员工账户" class="modal_form_input"></Input>
        </FormItem>
        <FormItem v-if="status.modalImport.source == 1 || status.modalImport.source == 3 || status.modalImport.source == 4">
        <Upload ref="upload" :before-upload="handleUpload" :action=status.modalImport.uploadUrl :data="tParam.uploadParam" :on-success="uploadSuccess"
                :on-progress="uploadProgress" :on-error="uploadError" :show-upload-list=true @format="['xlsx','csv']"
                :accept="status.modalImport.accept"
                style="display: inline-block;" >
          <Button type="primary" ghost icon="ios-cloud-upload">{{status.modalImport.btnText}}</Button>
        </Upload>
        </FormItem>
        <FormItem label="上传文件:" v-if="status.modalImport.source != 2">
          <div v-if="file !== null">{{ file.name }}</div>
        </FormItem>
        <FormItem label="Excel文件网址：" v-if="status.modalImport.source == 2">
          <Input  v-model.trim="uploadParam.url" placeholder="请输入网址"  class="modal_form_input"></Input>
        </FormItem>
      </Form>
    </Modal>

    <!--客户导入和抓取记录 弹出框-->
    <Modal v-model="status.modalRecord.isShow"
           title="" :mask-closable="false"
           :styles="{top: '20px',bottom:'20px',width:'80%'}">
      <importCustomerRecord ref="ImportCustomerRecord" :show-type="recordType"></importCustomerRecord>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
  import ApiBase from "../../api/moudles/ApiBase";
  import tiyData from "./js/import/targetUserImport_data";
  import {
    init
  } from "./js/import/targetUserImport_funs";
  import recordData from "./js/importRecord/importRecord_data";
  import ImportCustomerRecord from "./ImportCustomerRecord.vue";
  import { recordInit } from "./js/importRecord/importRecord_fun";
    export default {
      data(){
        return {
          tParam : tiyData.tParams,
          status : tiyData.tStatus,
          file:null,
          rules:tiyData.tStatus.rules,
          uploadParam : {
            keywordType: 0,
            keyword: "",
            url: null,
            employeeName:"",
              isGoogleCatch: false
          },
          recordType:'all'
        }
      },
      computed: {

      },
      methods: {
        uploadProgress(event){
          this.$Spin.show();
        },
        uploadSuccess(response){
          this.$Spin.hide();
          if (response.success) {
            this.$Message.success("导入成功。");
            tiyData.tStatus.modalImport.isShow = false;
          } else {
            this.$Message.error(response.errorMessage);
          }
          this.file = null;
        },
        uploadError(error){
          this.$Spin.hide();
          this.file = null;
        },
        handleUpload (file) {
          this.file = file;
          // delete this.uploadParam.url;
          let requestMsg = ApiBase.createRequestMsg(this.uploadParam);
          tiyData.tParams.uploadParam = {requestMsg: JSON.stringify(requestMsg)};
          return false;
        },
        showUploadModal(source){
          tiyData.tStatus.modalImport.source = source;
          this.file = null;
          this.uploadParam.keywordType =0;
          this.uploadParam.keyword = "";
          this.uploadParam.url = "";
          this.uploadParam.employeeName = "";
            this.uploadParam.isGoogleCatch = false;
          switch (source) {
              case 1: //本地excel文件
              case 2: //在线url
                  break;
              case 3: //本地csv文件
                  tiyData.tStatus.modalImport.uploadUrl = this.$apiPlugin.importInstagramAccountsByCsv();
                  tiyData.tStatus.modalImport.accept = ".csv,text/csv";
                  tiyData.tStatus.modalImport.btnText = "选择本地Csv文件";
                  break;
              case 4: //独立站excel文件
                  tiyData.tStatus.modalImport.uploadUrl = this.$apiPlugin.importWebsiteAccounts();
                  tiyData.tStatus.modalImport.accept = ".xls,.xlsx,application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
                  tiyData.tStatus.modalImport.btnText = "选择本地Excel文件";
                  break;
              default:
                  break;
          }
          tiyData.tStatus.modalImport.isShow = true;
        },
        uploadAccount(){
          let self = this;
          self.$refs["importForm"].validate((valid) => {
            if (valid) {
              switch (tiyData.tStatus.modalImport.source) {
                case 1:
                case 3:
                  if(null == this.file){
                      self.$Modal.error({
                      title: "error",
                      content: "请选择要上传的文件！"
                    });
                    return;
                  }
                  self.$Spin.show();
                  self.$refs.upload.post(this.file).then(function (response){
                    self.$Spin.hide();
                    if(response.success){
                      self.$Message.success("导入成功。");
                    } else {
                      self.$Message.error("导入失败！" + response.errorMessage);
                    }
                  });
                  break;
                case 2:
                  break;
                case 4:
                  if(!self.uploadParam.isGoogleCatch && !self.uploadParam.employeeName){
                    self.$Modal.error({
                        title: "error",
                        content: "必须填入推广员工账户！"
                    });
                    return;
                  }
                  if(null == this.file){
                    self.$Modal.error({
                        title: "error",
                        content: "请选择要上传的文件！"
                    });
                    return;
                  }
                  self.$Spin.show();
                  self.$refs.upload.post(this.file).then(function (response){
                      self.$Spin.hide();
                      if(response.success){
                        self.$Message.success("导入成功。");
                      } else {
                        self.$Message.error("导入失败！" + response.errorMessage);
                      }
                  });
                  break;
                default:
                  break;
              }
            }
          });
        },
        showRecord(tabName,type){
          this.recordType = type;
          recordInit(this, recordData, tabName);
          this.status.modalRecord.isShow = true;
        }
      },
      components: {
        ImportCustomerRecord
      },
      mounted(){
        init(tiyData);
        scrollTo(0,0);
      }
    }
</script>


<!--css样式-->
<style scoped lang="less">
  @import  (once,optional)  "../css/base.less";

  .table_css {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .modal_newuser_form {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 3rem;
    padding-right: 3rem;
  }

  .modal_newuser_form_input {
    width: 180px;
    margin-right: 10px;

  }

  .tiy_key {
    color: #9e9e9e;
    min-width: 90px;
    display: inline-block;
    text-align: right;
    padding-right: 0.5rem;
  }


  .panel{
    background: #f3f3f3;
    border-radius: 2px;
    width: 90%;
    text-align: left;
    margin: 2rem;
    .panel_content{
      padding: 1.5rem 1rem ;
      text-align: left;
    };

    .title{
      background: #2196f3;
      padding: 0.3rem 1rem ;
      border-radius: 1px;
      color: white;
    }

  }

  .tag_item{
    cursor: pointer;
    padding: 0.6rem 1rem ;
    background: #c27cbb;
    margin: 1rem ;
    color: white;
    width: 12rem;
  }

</style>
